;
(function () {
    var tc = {
        init: function () {
            var that = this;
            // ajax json路径
            $.getJSON(CafeJS.CXT + "business/analysis/szyb/json/szyb.json", function (data) {
                var id = $(".product-szyb-tab ul li.active").data('model').id;
                // 每个li都是var定义的，然后获取var定义动态添加
                data.basic_pro[id].forEach(function (item) {
                    // 判断json如果不包含content则不添加综合图
                    if (!item.content) return;
                    var $groupLi = $(`<li><span>${item.group_name}</span></li>`);
                    $groupLi.data('name', item.group_name)
                    $(".contain-right-title").append($groupLi);
                    var $li = $('<li>');
                    var $ul = $('<ul>').addClass('main');
                    var $ul_li = $('<li>');
                    if (item.height) {
                        // 判断如果这个页面包含高度的元素动态添加文本
                        var $div = $('<div>').addClass('fun2 flex');
                        var $span = $('<span>').html('高度选择&nbsp;:');
                        var $select = $('<select>').addClass('fun2-xk');
                        item.height.forEach(function (height) {
                            $select.append(`<option value=${height}>${height}hpa</option>`)
                        })
                        $ul_li.append($div.append($span).append($select));
                    }
                    // 动态获取页面元素
                    var $ul_li_ul = $('<ul>').addClass('fun-li');
                    item.content.forEach(function (ele) {
                        var $eleLi = $(`<li><span>${ele.ele_name}</span></li>`);
                        $eleLi.data('ele_id', ele.ele_id);
                        $ul_li_ul.append($eleLi);
                    })
                    $li.attr('name', item.group_name);
                    $li.append($ul.append($ul_li.append($ul_li_ul)));
                    $(".contain-right-ct").append($li);
                })
                that.getUserToSzybProCfg();
                that.bindEvt();
                // 给页面添加默认事件
                $(".contain-right-title").children().first().click();
            })
        },
        // 获取左侧页面初始化数据
        getUserToSzybProCfg: function () {
            $.getJSON(CafeJS.CXT + "monitor/getUserToSzybProCfg.do", function (res) {
                var divcon = $(".contain-ct");
                if (res.success) {
                    var dataArr = res.params.data;
                    for (var i = 0; i < dataArr.length; i++) {
                        var proObj = dataArr[i];
                        var $li = $(`<li><div class="contain-gx contain-re"></div><span>${proObj.productName}</span></li>`);
                        $li.data('pro', proObj);
                        divcon.append($li);
                    }
                }
            })
        },
        // 保存
        save: function () {
            var that = this;
            var content = [{
                productName: this.proNm.join('+'),
                elements: this.proId.join(','),
            }];
            $(".contain-ct li").each(function (i, li) {
                content.push($(li).data('pro'));
            })
            // 保存接口
            var param = { "content": content };
            $.ajax({
                url: CafeJS.CXT + "monitor/addUserPicCfg.do",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: 'json',
                data: JSON.stringify(param),
                success: function (res) {
                    // debugger
                    if (res.success) {
                        alert("保存成功");
                        $(".fun-li li").removeClass("active");
                        $(".bc-left").empty();
                        $(".contain-ct").empty();
                        that.getUserToSzybProCfg();
                    } else {
                        alert("保存失败");
                    }
                }
            })
        },
        // 删除接口
        del: function () {
            var content = [];
            $(".contain-ct li").each(function (i, li) {
                content.push($(li).data('pro'));
            })
            if (content.length === 0) return;
            var param = { "content": content };
            $.ajax({
                url: CafeJS.CXT + "monitor/addUserPicCfg.do",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: 'json',
                data: JSON.stringify(param),
                success: function (res) {
                    if (res.success) {
                        alert("删除成功");
                    } else {
                        alert("删除失败");
                    }
                }
            })
        },
        bindEvt: function () {
            // title栏切换
            var that = this;
            $(".contain-right-title").on("click", 'li', function () {
                $(this).addClass("active").siblings().removeClass("active")
                $(".contain-right-ct>li").eq($(this).index()).show().siblings().hide()
            })
            // 全选按钮效果
            $(".qx i").click(function () {
                var isSelected = $(this).hasClass('selected');
                if (isSelected) {
                    $(this).removeClass('selected').addClass('disabled');
                    $(".contain-re").removeClass('contain-gx').addClass('contain-qxgx')
                } else {
                    $(this).removeClass('disabled').addClass('selected');
                    $(".contain-re").removeClass('contain-qxgx').addClass('contain-gx')
                }
            })
            // 多选框样式
            $(".contain-ct").on("click", ".contain-re", function () {
                var isclick = $(this).hasClass('contain-gx');
                if (isclick) {
                    $(this).removeClass('contain-gx').addClass('contain-qxgx')
                } else {
                    $(this).removeClass('contain-qxgx').addClass('contain-gx')
                }
            })
            // 动态绑定点击删除
            $(".contain-left").on("click", '.delete-btn', function () {
                $(".contain-gx").each(function () {
                    $(".contain-ct>li").eq($(this).index()).remove();
                })
                that.del();
            });
            // 地面降水切换和点击页面出现文字
            $(".contain-right-ct").on('click', '.fun-li li', function () {
                $(this).toggleClass("active");
                var proNm = [], proId = [];
                var select = $('.fun2-xk option:selected').text();
                var val = $('.fun2-xk option:selected').val();
                $(".fun-li li.active").each(function (i, li) {
                    var tabNm = $(this).closest('ul.main').parent().attr('name');
                    var eleId = $(li).data('ele_id');
                    var nm = $(li).text();
                    if (tabNm == '降水') {
                        proNm.push(nm + tabNm);
                        proId.push(eleId);
                    }
                    else if (tabNm == '高空') {
                        proNm.push(select + nm);
                        proId.push(eleId + '-' + val);
                    } else {
                        proNm.push(nm);
                        proId.push(eleId);
                    }
                })
                that.proNm = proNm, that.proId = proId;
                // 字符串拼接
                $(".bc-left").html(proNm.join('+'));
            })
            $('#saveCfg').click(function () {
                debugger
                that.save();
            })
        }
    }
    // 调用
    tc.init();
})()